import React, { useState } from 'react'
import { Avatar, Button,Row,Col,Input ,Form,Select } from 'antd'
import { LeftOutlined} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { GetUserInfoRouter,SetInfoRouter } from '../../api'
import axios from 'axios';
export default function SetInfo() {
    const { Option } = Select;
    const [info,setInfo]=useState(undefined)
    const navigate = useNavigate();
    const back=()=>{
        navigate(-1)
      }
    React.useEffect(()=>{
        axios.get(`${GetUserInfoRouter}/${localStorage.getItem('login-user')}`).then((res)=>{
            // console.log(res.data.data);
            setInfo(res.data.data)
        })
    },[])
    const getAvatarlist=()=>{
        const a=[]
        for(let i=0;i<=12;i++){
            a.push(<Option value={i<10?"0"+i:i}>
                 <Avatar src={`http://www.ayaka002.top/assets/avatar/${i<10?"0"+i:i}.png`}/>
                 </Option>)
        }
        return a;
    }
    const onFinish=(values)=>{
      console.log(values);
        axios({
            url:SetInfoRouter,
            method:'post',
            data:{...values,acc:info.account}
        }).then((res)=>{
            console.log(res.data.message);
           
        })
        localStorage.setItem('user-avatar',values.avatar)
        navigate('/home')
    }
    //用户信息表单
    const u_info=info?<div>
    <Form
    layout="horizontal"
      className='setinfo'
      name="basic"
      onFinish={onFinish}
    >
        <div className="userinfo">
        <Form.Item
        label="avatar"
        name="avatar"
      >
        <Select
          defaultValue={info.avatar}
        >
            {getAvatarlist()}
        </Select>
      </Form.Item>
      <Form.Item
        label="Name"
        name="name"
        rules={[
          {
            max:10,
            message:'名字必须小于10位'
          }
        ]}
      >
        <Input  defaultValue={info.name}/>
      </Form.Item>
        <Form.Item
        label="gender"
        name="gender"
        
      >
        <Select
          defaultValue={info.gender}
        >
          <Option value="female">靓妹</Option>
          <Option value="male">靓仔</Option>
          <Option value="other">保密</Option>
        </Select>
      </Form.Item>
      <Form.Item
        label="Description"
        name="descr"
        rules={[
          {
            max:20,
            message:'描述必须小于20位'
          }
        ]}
      >
        <Input  defaultValue={info.descr}/>
      </Form.Item>
      </div>
      <div className="ops">
      <Form.Item
        wrapperCol={{
          span: 8,
        }}
      >
        <Button type="primary" htmlType="submit" block>
          提交
        </Button>
      </Form.Item>
      </div>
    </Form>
</div>:<div>正在加载</div>

  return (
    <div className='mainContainer'>
        <div className="header">
        <Row align='middle' style={{height:"50px"}}>
        <Col span={8}><Button style={{color:'#fff',border:'none'}} onClick={back} type='ghost' shape='circle' icon={<LeftOutlined />}></Button> </Col>
        <Col span={8} style={{textAlign:"center",fontSize:"16px",fontWeight:"bold",color:"#fff"}}>编辑</Col>
    </Row>
        </div>
        
        {u_info}
    </div>
  )
}
